<template>
  <div id="app" class="container">
    <!--项目搜索条件部分-->
    <div id="project_list" class="container-subject">
      <!--项目领域-->
      <article>
        <div class="blog-left">
          <div class="article-title">
            <div class="article-timer" style="margin-top: 20px">
              所属领域:&nbsp;
              <el-radio-group size="small" v-model="projectQueryVO.region" @change="getList()">
                <el-radio-button label="不限"></el-radio-button>
                <el-radio-button
                  :label="regions.region"
                  v-for="(regions, index) in projectRegionList"
                  :key="index"
                ></el-radio-button>
              </el-radio-group>
            </div>
          </div>
        </div>
      </article>
      <!--项目类型-->
      <article>
        <div class="blog-left">
          <div class="article-title">
            <div class="article-timer" style="margin-top: 20px">
              项目类型:&nbsp;
              <el-radio-group size="small"  v-model="projectQueryVO.type" @change="getList()">
                <el-radio-button label="不限"></el-radio-button>
                <el-radio-button
                  :label="type.type"
                  v-for="(type, index) in projectTypeList"
                  :key="index"
                ></el-radio-button>
              </el-radio-group>
            </div>
          </div>
        </div>
      </article>
      <!--项目地区-->
      <article>
        <div class="blog-left">
          <div class="article-title">
            <div class="article-timer" style="margin-top: 20px">
              地&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;区:&nbsp;
              <el-radio-group size="small" v-model="projectQueryVO.city" @change="getList()">
                <el-radio-button label="不限"></el-radio-button>
                <el-radio-button
                  :label="city.city"
                  v-for="(city, index) in projectCityList"
                  :key="index"
                ></el-radio-button>
              </el-radio-group>
            </div>
          </div>
        </div>
      </article>
      <!--关键字搜索--->
      <article>
        <div class="blog-left">
          <div class="article-title">
            <div class="article-timer" style="margin-top: 20px">
              搜&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;索:&nbsp;
              <el-radio-group>
                <el-form :inline="true" class="demo-form-inline">
                  <el-form-item label="">
                    <el-input
                      v-model="projectQueryVO.name"
                      placeholder="请输入项目名"
                      size="small"
                    ></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" size="small" @click="getList()"
                      >查询</el-button
                    >
                  </el-form-item>
                </el-form>
              </el-radio-group>
            </div>
          </div>
        </div>
      </article>
    </div>

    <!--项目列表-->
    <div id="good_project" class="container-subject">
      <!--文章模块-内容-->
      <el-row>
        <el-col
          class="top-course-container"
          :span="6"
          v-for="(project, index) in projectList"
          :key="index"
        >
          <div class="top-course">
            <dl class="item">
              <dt>
                <a href="#"><img :src="project.logo" /></a>
              </dt>
              <dd>
                {{ project.name }}<br />
                <p class="item-footer">
                  <span style="color: #0bbe0b"
                    >{{ project.region }}&nbsp;&nbsp;</span
                  ><span style="color: darkorange"
                    >{{ project.type }}&nbsp;&nbsp;</span
                  ><span style="color: orangered"
                    >{{ project.city }}&nbsp;&nbsp;</span
                  >
                  <span class="pull-right"
                    >关注度<span class="num">{{
                      project.attentionNumber
                    }}</span></span
                  >
                </p>
              </dd>
            </dl>
          </div>
        </el-col>
      </el-row>
      <br />
      <div style="text-align: center">
        <!-- 分页 -->
        <el-pagination
          :current-page="page"
          :page-size="limit"
          :total="total"
          style="padding: 30px 0; text-align: center"
          layout="total, prev, pager, next, jumper"
          @current-change="getList"
        />
      </div>
      <br />
    </div>
  </div>
</template>
<script>
import projectApi from "@/api/project";
export default {
  data() {
    return {
      // 查询之后接口返回集合
      projectList: null,
      page: 1,
      limit: 8,
      total: 0,
      // 条件封装对象
      projectQueryVO: {},
      projectTypeList: [],
      projectRegionList: [],
      projectCityList: [],
    };
  },
  created() {
    this.getList();
    this.init();
  },
  methods: {
    init() {
      projectApi.getReigionList().then((response) => {
        this.projectRegionList = response.data;
      });
      projectApi.getTypeList().then((response) => {
        this.projectTypeList = response.data;
      });
      projectApi.getCityList().then((response) => {
        this.projectCityList = response.data;
      });
    },
    getList(page = 1) {
      this.page = page;
      projectApi
        .getConditionProjects(this.page, this.limit, this.projectQueryVO)
        .then((response) => {
          this.projectList = response.data.records;
          this.total = response.data.total;
        });
    },
  },
};
</script>
<style>
/*总布局样式表*/
.container {
  width: 100%;
  background-color: #fafafa;
}

.container-subject {
  width: 80%;
  background-color: #fafafa;
  margin: 0px auto;
}

/*以下是优秀项目部分样式表*/
.text-right a {
  color: #666;
  text-decoration: none;
  font-size: small;
}

.top-course {
  margin: 10px;
  padding: 0px;
  border: 1px solid #dddddd;
}

.item img {
  width: 100%;
}

.item {
  background: #fff;
  margin: 0px;
}

.item dd {
  position: relative;
  left: -20px;
  height: 50px;
  background: #fff;
  color: #336699;
  font-size: small;
  font-weight: bolder;
}

.item:hover {
  transform: scale(1, 1);
  box-shadow: 0 5px 12px #dddddd;
  cursor: pointer;
}

.item dt {
  overflow: hidden;
}

.item img {
  transition: all 1.1s;
}

.item img:hover {
  transform: scale(1.05);
}

.item-footer {
  font-size: x-small;
  font-weight: normal;
  text-align: end;
  color: #999;
}

/*以下是政策宣传部分样式表*/
.blog-left {
  width: 98%;
  height: 98%;
  margin: 0px 0px 0px 0px;
  padding: 2px 0px 2px 0px;
  background: #fafafa;
}

.article-title {
  width: 98%;
  display: flex;
  justify-content: space-around;
  margin: 2px 0 2px 0;
}

article {
  width: 100%;
  border-bottom: 1px dotted #bbb;
}

.article-timer {
  width: 80%;
  text-align: left;
  color: #ccc;
}

article h4 {
  margin-left: 20px;
}

article h4 a {
  color: #336699;
  text-decoration: underline;
}
</style>